<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style>
		html, body {
			height: 100%;
		}
		label {
			vertical-align: middle;
		}
		#header {
			padding: 40px 0;
		}
		#start {
			min-width: 120px;
			text-decoration:none;
			font-size: 12px;
			font-weight: 700;
			color: white;
			text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
			display: inline-block;
			padding: 6px 16px 4px;
			border: 1px solid #3A5615;
			border-radius: 6px;
			background: #5F9614;
			background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #5F9513), color-stop(0.5, #73A91C), color-stop(0.5, #82B334), color-stop(1, #95C04B));
			background-image: -moz-linear-gradient(center bottom, #5F9513 0%, #73A91C 50%, #82B334 50%, #95C04B 100%);
			-webkit-background-clip: padding-box;
			-moz-background-clip: padding-box;
			background-clip: padding-box;
			box-shadow: 0 2px 3px rgba(0, 0, 0, .2), inset 0 0 1px rgba(255, 255, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
			cursor: pointer;
			outline: 0 none;
		}
	</style>
</head>
<body>

<div id="header">
	<button id="start">开始</button>
</div>

<table id="test" style="width:100%; height:100%">
	<tr>
		<td style="text-align: left; vertical-align: top;">
			<label for="test-select">支持label标签：</label>
			<select id="test-select">
				<option value="0">---请选择---</option>
				<option value="1">选项二</option>
				<option selected value="2">选项二</option>
				<option value="3">&#60;s&#62;选项三&#60;/s&#62;</option>
				<option value="4"><s>选项四</s></option>
				<option value="5">选项五</option>
			</select>
		</td>
		<td style="text-align: center; vertical-align: top;">
			<label for="test-select-selected">不设置 selected 属性</label>
			<select id="test-select-selected">
				<option value="0">---请选择---</option>
				<option value="1">选项二</option>
				<option value="2">选项二</option>
				<option value="3">选项三</option>
				<option value="4">选项四</option>
				<option value="5">选项五</option>
			</select>
		</td>
		<td style="text-align: right; vertical-align: top;">
			<label for="test-select-disabled">不可用下拉：</label>
			<select disabled id="test-select-disabled">
				<option selected value="0">disabled</option>
				<option value="1">选项二</option>
				<option value="2">选项二</option>
				<option value="3">选项三</option>
				<option value="4">选项四</option>
				<option value="5">选项五</option>
			</select>
		</td>
	</tr>
	<tr>
		<td style="text-align: left; vertical-align: middle;">
			<label for="test-option-disabled">不可用选项：</label>
			<select id="test-option-disabled">
				<option value="0">---请选择---</option>
				<option value="1">选项二</option>
				<option selected value="2">selected</option>
				<option value="3">选项三</option>
				<option disabled value="4">disabled</option>
				<option value="5">选项五</option>
			</select>
		</td>
		<td style="text-align: center; vertical-align: middle;">
			<label for="test-optgroup">选项分组：</label>
			<select id="test-optgroup">
				<optgroup label="我是A组">
					<option value="0">选项零</option>
					<option value="1">选项二</option>
					<option value="2">选项二</option>
					<option value="3">选项三</option>
					<option value="4">选项四</option>
					<option value="5">选项五</option>
				</optgroup>
				<optgroup label="我是B组">
					<option value ="mercedes">Mercedes</option>
					<option value ="audi">Audi</option>
				</optgroup>
			</select>
		</td>
		<td style="text-align: right; vertical-align: middle;">
			<label for="test-onchange">onchange 事件支持：</label>
			<select id="test-onchange" onchange="location.href=this.value">
				<option value="javascript:;">友情链接</option>
				<option value="https://github.com">Github</option>
				<option value="http://google.com">Google</option>
				<option value="http://qq.com">腾讯</option>
				<option value="http://baidu.com">百度</option>
			</select>
		</td>
	</tr>
	<tr>
		<td style="text-align: left; vertical-align: bottom;">
			<label for="test-cut">超长选项截断</label>
			<select id="test-cut" style="width:4em">
				<option value="0">---请选择---</option>
				<option value="1">选项二</option>
				<option selected value="2">我是一个超长的选项</option>
				<option value="3">选项三</option>
				<option value="4">选项四</option>
				<option value="5">选项五</option>
			</select>
		</td>
		<td style="text-align: center; vertical-align: bottom;">
			<label for="test-numerous">自动滚动条</label>
			<select id="test-numerous">
				<option value="0">---请选择---</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
				<option value="13">13</option>
				<option value="14">14</option>
				<option value="15">15</option>
				<option value="16">16</option>
				<option value="17">17</option>
				<option value="18">18</option>
				<option value="19">19</option>
				<option value="20">20</option>
				<option value="21">21</option>
				<option value="22">22</option>
				<option value="23">23</option>
				<option value="24">24</option>
				<option value="25">25</option>
				<option value="26">26</option>
				<option value="27">27</option>
				<option value="28">28</option>
				<option value="29">29</option>
				<option selected value="30">30</option>
				<option value="31">31</option>
				<option value="32">32</option>
				<option value="33">33</option>
				<option value="34">34</option>
				<option value="35">35</option>
				<option value="36">36</option>
				<option value="37">37</option>
				<option value="38">38</option>
				<option value="39">39</option>
				<option value="40">40</option>
				<option value="41">41</option>
				<option value="42">42</option>
				<option value="43">43</option>
				<option value="44">44</option>
				<option value="45">45</option>
				<option value="46">46</option>
				<option value="47">47</option>
				<option value="48">48</option>
				<option value="49">49</option>
				<option value="50">50</option>
				<option value="51">51</option>
				<option value="52">52</option>
				<option value="53">53</option>
				<option value="54">54</option>
				<option value="55">55</option>
				<option value="56">56</option>
				<option value="57">57</option>
				<option value="58">58</option>
				<option value="59">59</option>
				<option value="60">60</option>
			</select>
		</td>
		<td style="text-align: right; vertical-align: bottom;">
			<label for="test-none">无选项</label>
			<select id="test-none">
			</select>
		</td>
	</tr>
</table>



<script src="../lib/sea.js"></script>
<script>
seajs.config({
  alias: {
    "jquery": "jquery-1.10.2.js"
  }
});
</script>

<script>
seajs.use(['jquery', '../src/selectbox'], function ($, select) {
	$('#start').one('click', function () {
		$('#test select').each(function () {
			select(this);
		});

		$(this).css('opacity', .5);
		this.disabled = true;
	});

	$('#start-setting').one('click', function () {
		select($('#test-setting'), {
			selectboxHtml:
			  '<div class="ui-selectbox" hidefocus="true" tabindex="-1" aria-hidden>'
			+     '<div class="ui-selectbox-inner" data-value="">{{textContent}}</div>'
			+     '<i class="ui-selectbox-icon"></i>'
			+ '</div>',
			dropdownHtml:  '<dl class="ui-selectbox-dropdown" role="menu">{{options}}</dl>',
			optgroupHtml:  '<dt class="ui-selectbox-optgroup">{{label}}</dt>',
			optionHtml:    '<dd class="ui-selectbox-option {{className}}" data-option="{{index}}" tabindex="-1"><img src="{{icon}}" alt="icon" style="width:16px;height:16px;vertical-align:middle" /> {{textContent}}</dd>',
			selectedClass: 'ui-selectbox-selected',
			disabledClass: 'ui-selectbox-disabled',
			focusClass:    'ui-selectbox-focus',
			openClass:     'ui-selectbox-open'
		});
		this.disabled = true;
	});
});
</script>
</body>
</html>